* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #9a0bd3;
    color: #333;
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

/* Barra de navegación */
/* Barra de navegación */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(159, 97, 204, 0.658); /* Color morado con transparencia */
    padding: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    
}

/* Logo y nombre del salón */
.navbar-brand {
    font-family: Sofia;
    display: flex;
    align-items: center;
}

.logo {
    width: 50px;
    height: 50px;
    margin-right: 0.5rem;
}

.brand-name {
    font-family: sofia;
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: lighter;
}

/* Enlaces del menú (ocultos en pantallas grandes) */
.navbar-links {
    display: flex;
    list-style: none;
    padding: 0;
}

.navbar-links li {
    margin-left: 1rem;
}

.navbar-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
}

/* Ícono de menú (hamburguesa) */
.navbar-toggle {
    display: none; /* Oculta el ícono en pantallas grandes */
    font-size: 1.5rem;
    cursor: pointer;
    color: #ffffff;
}

/* Estilos responsive */
@media (max-width: 768px) {
    /* Muestra el ícono de menú en pantallas pequeñas */
    .navbar-toggle {
        display: block;
    }

    /* Oculta los enlaces de la barra de navegación en pantallas pequeñas */
    .navbar-links {
        display: none; /* Oculta el menú inicialmente */
        flex-direction: column;
        width: 100%;
        background-color: rgba(106, 13, 173, 0.705); /* Fondo del menú desplegado */
        position: absolute;
        top: 60px;
        left: 0;
        padding: 1rem 0;
        align-items: center;
    }

    .navbar-links li {
        text-align: center;
        padding: 1rem;
        width: 100%;
    }

    /* Muestra el menú cuando tiene la clase 'active' */
    .navbar-links.active {
        display: flex;
    }
}

/* Estilos adicionales para la sección de inicio */


.sofia-regular {
    font-family: "Sofia", cursive;
    font-weight: 400;
    font-style: normal;
  }

/* Estilo para la sección "home-content" */
/* Configuración de sección "home" */
#home {
    width: 100vw;         /* Ancho completo de la ventana */
}

/* Configuración de sección "home-content" */
#home-content {
    position: relative;   /* Posiciona el contenido relativo para que el texto esté por encima */
    width: 100%;         /* Ancho completo */
    height: 90vh;        /* Aumenta la altura de la sección (70% de la altura de la ventana) */
    display: flex;
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: center;   /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente */
    overflow: hidden;
}

.background-image {
    width: 100%;         /* Asegura que la imagen ocupe todo el ancho */
    height: 100%;        /* Asegura que la imagen ocupe toda la altura del contenedor */
    object-fit: cover;   /* Asegura que la imagen cubra todo el espacio manteniendo la proporción */
    position: relative;  /* Permite que la imagen esté detrás del texto */
    top: 0;              /* Alinea la imagen al inicio del contenedor */
    left: 0;
    z-index: 1;         /* Mantiene la imagen detrás del contenido */
}

/* Estilo del texto */
h1 {
    position: relative; /* Permite que el texto esté encima de la imagen */
    z-index: 2;        /* Asegura que el texto esté por encima de la imagen */
    color: rgb(157, 16, 185);      /* Cambia el color del texto a blanco para que resalte */
    font-size: 3em;    /* Tamaño de fuente más grande para el título */
    margin-bottom: 10px; /* Espacio debajo del título */
}

p {
    position: relative; /* Permite que el texto esté encima de la imagen */
    z-index: 2;        /* Asegura que el texto esté por encima de la imagen */
    color: rgb(199, 12, 199);      /* Cambia el color del texto a blanco para que resalte */
    text-align: center; /* Centra el texto */
    font-size: 1.5em;   /* Tamaño de fuente para el subtítulo */
    margin-bottom: 20px; /* Espacio debajo del párrafo */
}

/* Estilo para la sección "Acerca de Ingrid" */
#about-ingrid {
    display: flex;               /* Permite que los elementos estén en fila */
    align-items: center;        /* Centra verticalmente los elementos */
    padding: 20px;             /* Espaciado interior */
    margin-top: 100px;  
    margin-bottom: 100px;        /* Espacio superior para separar de la sección Home */
}

.about-content {
    display: flex;              /* Flexbox para la foto y el texto */
    max-width: 1200px;         /* Ancho máximo de la sección */
    margin: 0 auto;            /* Centra la sección horizontalmente */
    align-items: center;  
         /* Alinea verticalmente los elementos al centro */
}

.ingrid-photo {
    width: 300px;              /* Ancho de la foto */
    height: 300px;             /* Altura de la foto */
    border-radius: 50%;        /* Hace que la foto sea redonda */
    margin-right: 30px;        /* Espacio a la derecha de la foto (aumentado) */
    object-fit: cover; 
    flex-wrap: wrap;        /* Mantiene la proporción de la imagen */
}

.ingrid-info {
    flex:1;
    max-width: 700px;                  /* Permite que el texto use el espacio restante */
}

.ingrid-info h2 {
    margin-left: 30px;
    margin-bottom: 15px;  
    font-size: 40px;     /* Espacio debajo del título */
    color: #4f178b;            /* Color del título */
}

.ingrid-info p {
    margin-bottom: 10px;       /* Espacio entre párrafos */
    line-height: 1.5;  
    font-size: 16px;
    color: #333;        /* Mejora la legibilidad */
}


/*estilos para la sección de servicios*/

.swiper {
    max-width: 1400px; /* Aumenta el ancho máximo del carrusel */
    margin: 20px auto; /* Mueve el carrusel más hacia arriba */
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 20px;
    background-color: #bc9ac2;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ajuste de los slides para que estén en el centro */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-content {
    display: flex;
    align-items: center;
    max-width: 900px; /* Ajuste del ancho del contenido interno */
    margin: 0 auto;
}

/* Imagen y texto */
.slide-image {
    width: 300px; /* Imagen ocupa el 45% del ancho del contenedor */
    max-width: 300px;
    margin-top: 3%;
    margin-bottom: 3%;
    object-fit: cover; /* Tamaño máximo de la imagen */
    border-radius: 10px;
    margin-right: 20px;
}

.slide-text {
    width: 55%; /* Texto ocupa el 55% del ancho del contenedor */
}

.slide-text h2 {
    width: calc(100%-270px);
}

.slide-text p {
    font-size: 1em;
    line-height: 1.5;
    color: #333;
}



/*estilo de botones*/
button {
    background-color: rgb(87, 87, 131);
    color: rgb(224, 213, 223);
    border:0;
    border-radius: 50px;
    padding: 17px 40px;
    margin: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Estilos para las redes sociales */
.social-media {
    display: flex;
    gap: 10px;
}

.social-media img {
    width: 30px; /* Ajusta el tamaño de los íconos */
    height: auto;
}

/* Estilos para el formulario de agendar citas */
.hidden {
    display: none; /* Oculta el formulario inicialmente, esto lo vamos a poner en citas */ 
}

#appointmentForm {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 20px auto;
}

#appointmentForm label {
    display: block;
    margin: 10px 0 5px;
}

#appointmentForm input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#appointmentForm button {
    margin-top: 10px;
}

/* Estilo para la sección de Contacto */
#contact {
    width: 100%;                     /* Ancho completo */
    background-color: #b990cc;       /* Color de fondo */
    color: #fff;                     /* Color de texto */
    padding: 20px 0;                 /* Espaciado superior e inferior */
}

.contact-container {
    display: flex;                   /* Flexbox para organizar en fila */
    justify-content: space-around;   /* Espaciado entre secciones */
    max-width: 1200px;               /* Ancho máximo de la caja */
    margin: 0 auto;                  /* Centrado horizontal */
    align-items: center;             /* Alinea al centro verticalmente */
}

.contact-section {
    text-align: center;              /* Centra el texto */
}

.contact-section h3 {
    font-size: 18px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}

.contact-section p {
    font-size: 20px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}

.social-icons a,
.payment-methods img {
    margin: 0.5px;                   /* Espacio entre íconos */
}

.social-icons img,
.payment-methods img {
    width: 30px;                     /* Tamaño de íconos */
    height: auto;
}

/* Responsive Design para pantalla pequeña */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;      /* Cambia a columna en dispositivos pequeños */
        text-align: center;          /* Centra el contenido */
    }

    .contact-section {
        margin-bottom: 15px;         /* Espacio entre secciones en móviles */
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #EDE7F6;
    color: #333;
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

/*Estilos para la barra de navegación*/
header {
    background-color: #b990cc;
    padding: 7px 0;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .logo {
    display: flex;
    align-items: center;
}

nav .logo img {
    width: 15%; /* Ajusta el tamaño del logo */
    height: auto;
    margin-right: 10px;
   
}

.logo span{
    font-family: sofia;
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-family: sofia;
    font-weight: bold;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #574269;
}

nav ul li:hover .submenu {
    display: block;
}

.submenu li {
    padding: 5px 10px;
}

/* Estilos adicionales para la sección de inicio */


.sofia-regular {
    font-family: "Sofia", cursive;
    font-weight: 400;
    font-style: normal;
  }

/* Estilo para la sección "home-content" */
/* Configuración de sección "home" */
#home {
    width: 100vw;         /* Ancho completo de la ventana */
}

/* Configuración de sección "home-content" */
#home-content {
    position: relative;   /* Posiciona el contenido relativo para que el texto esté por encima */
    width: 100%;         /* Ancho completo */
    height: 90vh;        /* Aumenta la altura de la sección (70% de la altura de la ventana) */
    display: flex;
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: center;   /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente */
    overflow: hidden;
}

.background-image {
    width: 100%;         /* Asegura que la imagen ocupe todo el ancho */
    height: 100%;        /* Asegura que la imagen ocupe toda la altura del contenedor */
    object-fit: cover;   /* Asegura que la imagen cubra todo el espacio manteniendo la proporción */
    position: absolute;  /* Permite que la imagen esté detrás del texto */
    top: 0;              /* Alinea la imagen al inicio del contenedor */
    left: 0;
    z-index: 1;         /* Mantiene la imagen detrás del contenido */
}

/* Estilo del texto */
h1 {
    position: relative; /* Permite que el texto esté encima de la imagen */
    z-index: 2;        /* Asegura que el texto esté por encima de la imagen */
    color: white;      /* Cambia el color del texto a blanco para que resalte */
    font-size: 3em;    /* Tamaño de fuente más grande para el título */
    margin-bottom: 10px; /* Espacio debajo del título */
}

p {
    position: relative; /* Permite que el texto esté encima de la imagen */
    z-index: 2;        /* Asegura que el texto esté por encima de la imagen */
    color: rgb(255, 255, 255);      /* Cambia el color del texto a blanco para que resalte */
    text-align: center; /* Centra el texto */
    font-size: 1.5em;   /* Tamaño de fuente para el subtítulo */
    margin-bottom: 20px; /* Espacio debajo del párrafo */
}

/* Botón de agendar cita */
.ver-mas-btn {
    background-color: #a480ca;
    color: white;
    padding: 17px 40px;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s;
    z-index: 2; /* Asegura que el botón esté por encima de la imagen */
}

.ver-mas:hover {
    background-color: #5a0fbf;
}

/* Estilo para la sección "Acerca de Ingrid" */
#about-ingrid {
    display: flex;               /* Permite que los elementos estén en fila */
    align-items: center;        /* Centra verticalmente los elementos */
    padding: 20px;             /* Espaciado interior */
    margin-top: 100px;  
    margin-bottom: 100px;        /* Espacio superior para separar de la sección Home */
}

.about-content {
    display: flex;              /* Flexbox para la foto y el texto */
    max-width: 1200px;         /* Ancho máximo de la sección */
    margin: 0 auto;            /* Centra la sección horizontalmente */
    align-items: center;  
         /* Alinea verticalmente los elementos al centro */
}

.ingrid-photo {
    width: 300px;              /* Ancho de la foto */
    height: 300px;             /* Altura de la foto */
    border-radius: 50%;        /* Hace que la foto sea redonda */
    margin-right: 30px;        /* Espacio a la derecha de la foto (aumentado) */
    object-fit: cover;         /* Mantiene la proporción de la imagen */
}

.ingrid-info {
    flex:1;
    max-width: 700px;                  /* Permite que el texto use el espacio restante */
}

.ingrid-info h2 {
    margin-left: 30px;
    margin-bottom: 15px;  
    font-size: 40px;     /* Espacio debajo del título */
    color: #4f178b;            /* Color del título */
}

.ingrid-info p {
    margin-bottom: 10px;       /* Espacio entre párrafos */
    line-height: 1.5;  
    font-size: 16px;
    color: #333;        /* Mejora la legibilidad */
}

/*estilos para la sección de servicios*/

.swiper {
    max-width: 1400px; /* Aumenta el ancho máximo del carrusel */
    margin: 20px auto; /* Mueve el carrusel más hacia arriba */
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 20px;
    background-color: #bc9ac2;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ajuste de los slides para que estén en el centro */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-content {
    display: flex;
    align-items: center;
    max-width: 900px; /* Ajuste del ancho del contenido interno */
    margin: 0 auto;
}

/* Imagen y texto */
.slide-image {
    width: 300px; /* Imagen ocupa el 45% del ancho del contenedor */
    max-width: 300px;
    margin-top: 3%;
    margin-bottom: 3%;
    object-fit: cover; /* Tamaño máximo de la imagen */
    border-radius: 10px;
    margin-right: 20px;
}

.slide-text {
    width: 55%; /* Texto ocupa el 55% del ancho del contenedor */
}

.slide-text h2 {
    width: calc(100%-270px);
}

.slide-text p {
    font-size: 1em;
    line-height: 1.5;
    color: #333;
}

/*estilo de botones*/
button {
    background-color: rgb(87, 87, 131);
    color: rgb(224, 213, 223);
    border:0;
    border-radius: 50px;
    padding: 17px 40px;
    margin: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Estilos para las redes sociales */
.social-media {
    display: flex;
    gap: 10px;
}

.social-media img {
    width: 30px; /* Ajusta el tamaño de los íconos */
    height: auto;
}


/* Estilo para la sección de Contacto */
#contact {
    width: 100%;                     /* Ancho completo */
    background-color: #b990cc;       /* Color de fondo */
    color: #fff;                     /* Color de texto */
    padding: 20px 0;                 /* Espaciado superior e inferior */
}

.contact-container {
    display: flex;                   /* Flexbox para organizar en fila */
    justify-content: space-around;   /* Espaciado entre secciones */
    max-width: 1200px;               /* Ancho máximo de la caja */
    margin: 0 auto;                  /* Centrado horizontal */
    align-items: center;             /* Alinea al centro verticalmente */
}

.contact-section {
    text-align: center;              /* Centra el texto */
}

.contact-section h3 {
    font-size: 18px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}

.contact-section p {
    font-size: 20px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}

.social-icons a,
.payment-methods img {
    margin: 0.5px;                   /* Espacio entre íconos */
}

.social-icons img,
.payment-methods img {
    width: 30px;                     /* Tamaño de íconos */
    height: auto;
}

/* Responsive Design para pantalla pequeña */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;      /* Cambia a columna en dispositivos pequeños */
        text-align: center;          /* Centra el contenido */
    }

    .contact-section {
        margin-bottom: 15px;         /* Espacio entre secciones en móviles */
    }
}

/* Ocultar menú en móviles y mostrar icono */
.nav-links {
    display: flex;
}

.menu-icon {
    display: none;
    cursor: pointer;
}

/* Configuración para móviles */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Oculta el menú por defecto */
        flex-direction: column;
        text-align: center;
        width: 100%;
        background-color: #bd81da;
    }

    .nav-links li {
        padding: 15px 0; /* Espacio entre elementos */
        border-bottom: 1px solid #fff;
    }

    /* Mostrar el icono del menú en móviles */
    .menu-icon {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    /* Estilos cuando el menú está activo */
    .nav-links.active {
        display: flex; /* Muestra el menú al activar */
    }
}


/* Media queries para responsive design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Cambia el menú a columna en pantallas más pequeñas */
    }
    
    .ingrid-photo {
        width: 200px; /* Reduce el tamaño de la foto en pantallas pequeñas */
        height: 200px;
    }
    
    h1 {
        font-size: 2em; /* Ajusta el tamaño del título */
    }

    p {
        font-size: 1em; /* Ajusta el tamaño del párrafo */
    }

    .ver-mas-btn {
        font-size: 1em; /* Ajusta el tamaño del botón */
    }

    .swiper-slide {
        width: 100%; /* Cambia el ancho a 100% en pantallas pequeñas */
        margin: 10px 0; /* Espacio superior e inferior */
    }

    /* Ajuste para la imagen y descripción en el carrusel */
    .slide-content {
        flex-direction: column; /* Coloca la imagen arriba y la descripción abajo */
        text-align: center;     /* Centra el texto */
    }

    .slide-image {
        margin-right: 0; /* Elimina el margen derecho de la imagen */
        margin-bottom: 15px; /* Agrega espacio entre la imagen y el texto */
        width: 100%; /* Ajusta el ancho de la imagen al 100% del contenedor */
        max-width: 300px; /* Limita el ancho máximo para evitar que se agrande demasiado */
    }

    .slide-text {
        width: 100%; /* Ajusta el texto al ancho del contenedor */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em; /* Ajusta aún más el tamaño del título */
    }

    p {
        font-size: 0.9em; /* Ajusta el tamaño del párrafo */
    }
}

@media (max-width: 768px) {
    /* Ajustes para la sección de "Acerca de Ingrid" en pantallas pequeñas */
    #about-ingrid {
        flex-direction: column; /* Cambia la disposición a columna */
        align-items: center; /* Centra el contenido */
        text-align: center; /* Centra el texto */
        padding: 15px; /* Reduce el padding */
    }

    .ingrid-info {
        order: 1; /* Asegura que el título esté primero */
    }

    .ingrid-info h2 {
        font-size: 1.8em; /* Reduce el tamaño del título */
        margin: 10px 0; /* Espacio arriba y abajo del título */
    }

    /* Vista para dispositivos móviles */
@media screen and (max-width: 768px) {
    .contenedor {
        flex-direction: column; /* Cambia a disposición vertical */
        text-align: center; /* Centra el texto */
    }

    .ingrid-photo {
        margin-right: 0; /* Elimina el margen derecho */
        margin-top: 20px; /* Agrega espacio arriba de la imagen */
    }
}

    .ingrid-info p {
        order: 3; /* Coloca la descripción debajo de la imagen */
        font-size: 0.9em; /* Reduce el tamaño de la fuente de la descripción */
        line-height: 1.4; /* Ajusta el espacio entre líneas para mejorar legibilidad */
    }
}

#whatsapp-button {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde el lado derecho */ /* Color de fondo de WhatsApp */
    border-radius: 50%; /* Hace que el botón sea redondo */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    transition: transform 0.3s; /* Efecto de transformación */
}

#whatsapp-button img {
    width: 60px; /* Tamaño del ícono */
    height: 60px; /* Tamaño del ícono */
}

#whatsapp-button:hover {
    transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
}

/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    #about-ingrid {
        flex-direction: column;  /* Cambia la dirección de los elementos a columna */
        align-items: center;     /* Centra todo el contenido horizontalmente */
        margin-top: 50px;        /* Espacio superior */
        margin-bottom: 50px;     /* Espacio inferior */
    }

    .about-content {
        flex-direction: column;  /* Cambia la disposición a columna */
        align-items: center;     /* Centra los elementos */
    }

    .ingrid-photo {
        margin-right: 0;        /* Elimina el margen derecho */
        margin-bottom: 20px;    /* Añade espacio debajo de la foto */
        width: 250px;           /* Reduce el tamaño de la foto en pantallas pequeñas */
        height: 250px;          /* Mantiene la proporción de la imagen */
    }

    .ingrid-info {
        max-width: 90%;         /* Aumenta el espacio disponible para el texto */
        margin-top: 10px;       /* Espacio superior entre la imagen y el texto */
    }
}